<template>
    <div>
        <Modal v-model="isShowModal" :title="title" @on-cancel="hide()" :mask-closable="false" width="950">


            <Divider orientation="left">订单信息</Divider>
            <Row :gutter="16">
                <Col span="8">
                    <div>订单编号：{{orderInfo.orderVip.orderVipCode}}</div>
                </Col>
                <Col span="16">
                    <div>订单标题：{{orderInfo.orderVip.orderTitle}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>下单账号：{{orderInfo.orderVip.username}}</div>
                </Col>
                <Col span="8">
                    <div>下单昵称：{{orderInfo.orderVip.nickName}}</div>
                </Col>
                <Col span="8">
                    <div>订单总额：￥{{orderInfo.orderVip.amount}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>
                        订单状态：
                        <template v-if="orderInfo.orderVip.orderState == 1">待付款</template>
                        <template v-if="orderInfo.orderVip.orderState == 2">待发货</template>
                        <template v-if="orderInfo.orderVip.orderState == 3">待收货</template>
                        <template v-if="orderInfo.orderVip.orderState == 4">已完成</template>
                        <template v-if="orderInfo.orderVip.orderState == 5">交易关闭</template>
                    </div>
                </Col>
                <Col span="8">
                    <div>更新时间：{{orderInfo.orderVip.updateTime}}</div>
                </Col>
                <Col span="8">
                    <div>创建时间：￥{{orderInfo.orderVip.createTime}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>付款时间：{{orderInfo.orderVip.paySuccessTime ? orderInfo.orderVip.paySuccessTime :'-'}}</div>
                </Col>
            </Row>

            <Divider orientation="left">支付信息</Divider>
            <Row :gutter="16">
                <Col span="8">
                    <div>余额抵扣：￥{{orderInfo.orderVip.balanceDeduction?orderInfo.orderVip.balanceDeduction:'0.00'}}</div>
                </Col>
                <Col span="8">
                    <div>积分抵扣：￥{{orderInfo.orderVip.integralDeduction?orderInfo.orderVip.integralDeduction:'0.00'}}</div>
                </Col>
                <Col span="8">
                    <div>支付方式：
                        <template v-if="orderInfo.orderVip.payMethod == 'alipay'">支付宝支付</template>
                        <template v-if="orderInfo.orderVip.payMethod == 'wechat'">微信支付</template>
                        <template v-if="!orderInfo.orderVip.payMethod">-</template>
                    </div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>支付金额：￥{{orderInfo.orderVip.payAmount?orderInfo.orderVip.payAmount:'0.00'}}</div>
                </Col>
                <Col span="16">
                    <div>交易流水号：{{orderInfo.orderVip.payNo?orderInfo.orderVip.payNo:'-'}}</div>
                </Col>
            </Row>

            <Divider orientation="left">物流信息</Divider>
            <Row :gutter="16">
                <Col span="8">
                    <div>收货人姓名：{{orderInfo.vipLogistics.consigneeName}}</div>
                </Col>
                <Col span="8">
                    <div>收货人手机号：{{orderInfo.vipLogistics.consigneePhone}}</div>
                </Col>
                <Col span="8">
                    <div>收货人地址：{{orderInfo.vipLogistics.consigneeAddress}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>物流公司：{{orderInfo.vipLogistics.logisticsName ? orderInfo.vipLogistics.logisticsName:'-'}}
                    </div>
                </Col>
                <Col span="8">
                    <div>物流公司代码：{{orderInfo.vipLogistics.logisticsCode ? orderInfo.vipLogistics.logisticsCode:'-'}}
                    </div>
                </Col>
                <Col span="8">
                    <div>物流单号：{{orderInfo.vipLogistics.logisticsNum ? orderInfo.vipLogistics.logisticsNum:'-'}}</div>
                </Col>
            </Row>
            <Row :gutter="16">
                <Col span="8">
                    <div>发货时间：{{orderInfo.vipLogistics.sendTime ? orderInfo.vipLogistics.sendTime:'-'}}</div>
                </Col>
                <Col span="16">
                    <div>收货时间：{{orderInfo.vipLogistics.getTime ? orderInfo.vipLogistics.getTime:'-'}}</div>
                </Col>
            </Row>
            <Divider orientation="left">商品信息</Divider>
            <Row>
                <Col span="24">
                    <template v-if="orderInfo.orderVip.goodsSku">
                        <div class="j-order-image">
                            <div class="j-order-image-main">
                                <img :src="goodsSkuInfo.specImages?goodsSkuInfo.specImages:orderInfo.orderVip.goodsImages">
                            </div>
                            <div class="j-order-image-info">
                                <div class="j-order-goods-title">{{orderInfo.orderVip.goodsName}}</div>
                                <div class="j-order-goods-sku">规格：{{goodsSkuInfo.specValue}}</div>
                                <div class="j-order-goods-price">价格：{{orderInfo.orderVip.goodsPrice}}元</div>
                                <div class="j-order-goods-num">数量：x1</div>
                            </div>
                        </div>
                    </template>
                    <template v-else>
                        <div class="j-order-image">
                            <div class="j-order-image-main">
                                <img :src="orderInfo.orderVip.specImages">
                            </div>
                            <div class="j-order-image-info">
                                <div class="j-order-goods-title">{{orderInfo.orderVip.goodsName}}</div>
                                <div class="j-order-goods-price">价格：{{orderInfo.orderVip.goodsPrice}}元</div>
                                <div class="j-order-goods-num">数量：x1</div>
                            </div>
                        </div>
                    </template>
                </Col>
            </Row>

            <!-- 重写对话框底部按钮 -->
            <div slot="footer">
                <Button @click="hide('formValidate')">取消</Button>
                <Button type="primary" @click="hide()" :loading="loadingBtn">
                    <span v-if="!loadingBtn">确定</span>
                    <span v-else>请稍候...</span>
                </Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    export default {
        name: "order-ope",
        data() {
            return {
                isShowModal: false,
                loadingBtn: false,
                orderInfo: {
                    orderVip: {},
                    vipLogistics: {},
                    logistics: ''
                },
                goodsSkuInfo: {},
                title: '订单详情'
            }
        },
        methods: {
            // 显示模态框
            show(row) {
                console.log(row)
                this.isShowModal = true;
                this.getOrderVipById(row);
            },
            // 查询订单详情
            getOrderVipById(row) {
                this.$Spin.show();
                this.axios.post('/orderVip/getOrderVipById', {
                    vipOrderId: row.orderVipId
                }).then(res => {
                    console.log(res);
                    setTimeout(() => {
                        this.$Spin.hide();
                    }, 300);
                    if (res.status == 200) {
                        // this.$Message.success('操作成功.');
                        this.orderInfo = res.data;
                        if (res.data.orderVip.goodsSku) {
                            this.goodsSkuInfo = JSON.parse(res.data.orderVip.goodsSku);
                        }
                    }
                    if (res.status == 500) {
                        this.$Notice.error({
                            title: '服务器内部错误',
                            desc: '查看订单详情接口报错',
                            duration: 0
                        });
                    }
                })
            },
            // 关闭模态框
            hide() {
                this.isShowModal = false;
            }
        }
    }
</script>

<style scoped lang="less">
    .j-order-image {
        display: flex;

        .j-order-image-main {
            width: 130px;
            height: 130px;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .j-order-image-info {
            margin-left: 10px;

            .j-order-goods-sku {
                margin-top: 5px;
            }

            .j-order-goods-price {
                margin-top: 5px;
            }

            .j-order-goods-num {
                margin-top: 5px;
            }
        }
    }

</style>